<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>广外论坛</title>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/vue-router.js"></script>
    <link rel="stylesheet" href="../../../css/animate.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        header {
            background-color: #3498db;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .container {
            display: flex;
            flex: 1;
        }
        nav {
            width: 200px;
            background-color: #f4f4f4;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }
        nav a {
            display: block;
            padding: 10px;
            color: #333;
            text-decoration: none;
            margin-bottom: 5px;
            border-radius: 4px;
        }
        nav a:hover {
            background-color: #ddd;
        }
        nav .router-link-active {
            background-color: #3498db;
            color: white;
        }
        main {
            flex: 1;
            padding: 20px;
        }
        footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view name="header"></router-view>
        <div class="container">
            <nav>
                <router-link to="/posts">帖子列表</router-link>
                <router-link to="/profile">个人资料</router-link>
            </nav>
            <main>
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </main>
        </div>
        <router-view name="footer"></router-view>
    </div>

    <script>
        // 头部组件
        var Header = {
            template: `
                <header>
                    <h1>(*^_^*)软工之家论坛</h1>
                </header>
            `
        };

        // 底部组件
        var Footer = {
            template: `
                <footer>
                    <p>© 2025 嫌疑人张某 - 版权所有</p>
                </footer>
            `
        };

        // 帖子列表组件
        var Posts = {
            template: `
                <div>
                    <h2>帖子列表</h2>
                    <ul>
                        <li>帖子 1</li>
                        <li>帖子 2</li>
                        <li>帖子 3</li>
                    </ul>
                </div>
            `
        };

        // 个人资料组件
        var Profile = {
            template: `
                <div>
                    <h2>个人资料</h2>
                    <p>姓名：张三</p>
                    <p>年龄：25</p>
                    <p>性别：男</p>
                </div>
            `
        };

        // 路由配置
        var router = new VueRouter({
            routes: [
                {
                    path: '/posts',
                    components: {
                        default: Posts,
                        header: Header,
                        footer: Footer
                    }
                },
                {
                    path: '/profile',
                    components: {
                        default: Profile,
                        header: Header,
                        footer: Footer
                    }
                },
                {
                    path: '*',
                    redirect: '/posts' // 默认跳转到帖子列表
                }
            ]
        });

        // Vue 实例
        var vm = new Vue({
            el: '#app',
            router: router,
        });
    </script>
</body>
</html>